<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price0">¥159.00</li> 
            <li><input type="button" name="minus" value="-" onclick="minus(0);">
                <input type="text" name="amount" value="3">
                <input type="button" name="plus" value="+" onclick="plus(0);"></li>
            <li>¥<input type="text" name="price" value="159.00"></li>
           
        </ul>
        <ul>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
            <li id="price1">¥159.00</li>
            <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
            <li>¥<input type="text" name="price" value="159.00"></li>
            
            
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
</div>
<script>
    // 如果页面出现多个name属性值相同的对象，则会把他们放在一个数组当中 0,1,2,3,4,5,6
    function minus(num){
        
        var count = document.getElementsByName("amount")[num].value;
        if(count <= 1){
            alert("数量不能再减了，再减就没有了");
        } else {
            count = count - 1;  //
        }
        document.getElementsByName("amount")[num].value = count;

        // 更新小计
        xiaoji();
        // 更新合计
        accounts();
    }


    // 加数量   涉及后台判断  要读取京东的数据库 库存，看一下有没有这么多商品
    function plus(num){
        // 华为mate60 库存  9999999999999
        var count = document.getElementsByName("amount")[num].value;  // 获取到的值是一个字符串类型的数字
        count = parseInt(count) + 1;   // 加号 除了 加法 还有 拼接
        document.getElementsByName("amount")[num].value = count;
        
        // 更新小计
        xiaoji();
        // 更新合计
        accounts();

    }

    // 合计
    function accounts(){
        var counts = document.getElementsByName("amount");
        var prices = document.getElementsByName("price");

        var total = 0;

        for(var i = 0; i < counts.length; i++){
           total = total + counts[i].value * prices[i].value;
        }
        document.getElementById("totalPrice").innerHTML = "￥"+total;
    }

    // 小计
    function xiaoji(){
        var counts = document.getElementsByName("amount");
        var prices = document.getElementsByName("price");

        document.getElementById("price0").innerHTML = "￥"+(counts[0].value * prices[0].value);
        document.getElementById("price1").innerHTML = "￥"+(counts[1].value * prices[1].value);

    }

    xiaoji();









</script>
</body>
</html>